<template>
	<scroll-view scroll-y="true" class="container big-box">
		<top-navigation :isBack="false" bgColor="#168EF000">
			<view slot='left-slot' class="left-slot" @tap="goIndex">
				<image class="left-slot" src="/static/images/login/close.png" mode="widthFix"></image>
			</view>
		</top-navigation>
		<u-toast ref="uToast"></u-toast>
		<!-- <view class="bg" :style="{background: 'url('+loginBg+') center/100% 100% no-repeat'}">

		</view> -->
		<view class="welecome">
			<!-- Hello， -->
		</view>
		<view class="welecome-c justify-start align-center">
			<image class="mobile" src="/static/images/login/mobile.png" mode="widthFix"></image> 手机登录或注册
		</view>
		<u-picker :show="countryShow" :columns="columns" @close="pickerClose" @cancel='pickerClose'
			@confirm='pickerConfirm' confirmText='完成' closeOnClickOverlay></u-picker>
		<!-- 横线式输入框 -->
		<view class="find-form">
			<block>
				<view class="form-input">
					<!-- <image class="placeholder-img" src='/static/phone-icon.png' mode="widthFix"></image> -->
					<view class="justify-start align-center">
						<text class="location-num DINPro-Bold">+{{pickerSelect}}</text>
						<x-img width='20rpx' :height='null' static src='/static/images/login/down.png'
							mode="widthFix"></x-img>
					</view>
					<input class="uni-input DINPro-Bold" placeholder-class="placeholder-class" type="text"
						maxlength="11" v-model="formData.mobile" placeholder="请输入你的手机号" />
				</view>
				<view class="form-input justify-between">
						<!-- <image class="placeholder-img" src='/static/password-icon.png' mode="widthFix"></image> -->
						<!-- <x-img width='24rpx' :height='null' static src='/static/password-icon.png'
							mode="widthFix"></x-img> -->
						<input class="uni-input-dy info-content DINPro-Bold" placeholder-class="placeholder-class"
							type="text" maxlength="50" placeholder="请输入验证码" v-model="formData.password" />
					<view class="dynacode" :class="dynacodeData.seconds == 120 ? 'color-base-text' : 'color-tip'"
						@click="sendMobileCode">
						{{ dynacodeData.codeText }}
						</view>
					<!-- tryToVerify sendMobileCode -->
					<!-- <image :src="captcha.img" class="captcha" @click="getCaptcha"></image> -->
				</view>
				<view class="form-input align-type">
					<view class="justify-start align-center">
						<!-- <image class="placeholder-img" src='/static/password-icon.png' mode="widthFix"></image> -->
						<!-- 	<x-img width='24rpx' :height='null' static src='/static/password-icon.png'
							mode="widthFix"></x-img> -->
						<input type="text" placeholder="请输入邀请码(非必填)" placeholder-class="placeholder-class"
							class="uni-input info-content DINPro-Bold" v-model="formData.invitation_code" />
					</view>
					<image :src="captcha.img" class="captcha" mode="heightFix" @click="getCaptcha"></image>
				</view>


			</block>
			<block>
				<button type="primary" class="find-btn justify-center align-center" @click="login"
					:style="{background: !disable?'#20202c':'#27ff92',color:!disable? '#8f97b0':'#000'}">登录</button>
				<!-- <button type="primary" class="find-btn justify-center align-center" @click="$navto('/pages/login/register')">注册</button> -->
			</block>
			<view class="tips justify-center">
				未注册将自动创建帐号
			</view>
			<view class="user-agreement justify-center">
				<view class="justify-start align-center">
					<u-checkbox-group v-model="checked" size='14' inactiveColor='#212030'>
						<u-checkbox activeColor="#3ADD8F" name='true' inactiveColor='#212030' label=""></u-checkbox>
					</u-checkbox-group>
					请阅读并同意<text class="user-read" @tap="goAgreement('user')"> 用户协议 </text>以及<text class='user-read'
						@tap="goAgreement('privacy')"> 隐私政策 </text>
				</view>
			</view>
		</view>

		<!-- 横线式输入框end -->
		<!-- 弹窗 -->
		<u-popup :show="userShow" mode="bottom" round='20' @close="close" @open="open">
			<view class="popup-box">
				<view class="title">
					用户协议及隐私政策
				</view>
				<view class="popup-content">
					为了你的安全、放心环境下使用潮玩星际,请阅读并同意 <text class='user-read' @tap="goAgreement('user')"> 《用户协议》 </text>和<text
						class='user-read' @tap="goAgreement('privacy')"> 《隐私政策》
					</text>
				</view>
				<button type="primary" class="popup-btn justify-center align-center" @click="agree">同意并继续</button>
				<view class="popup-btn-close justify-center align-center" @click="close">不同意</view>
			</view>
		</u-popup>
		<!-- 升级弹窗 -->
		<!-- #ifdef APP-PLUS -->
		<xunUpgrade :nextVersion="nextVersion" :content="content" :androidUrl="androidUrl" iosUrl=""
			:forceable="forceable"></xunUpgrade>
		<!-- #endif -->
		<message-modal :isShow='captchaShow' @sendMobileCode='sendMobileCode' @close='captchaShow=false'></message-modal>
	</scroll-view>
</template>

<script>
	import messageModal from './messageModal/messageModal.vue'
	import xunUpgrade from '@/components/xun-upgrade/xun-upgrade'
	//在需要加、解码的的文件里引入【注意替换成自己的路径】
	import {
		Base64
	} from '@/utils/plugs/imgOrBase64.js';

	// let msg = 'Hello, base64！我是威叔~~_~!';

	// let encodeStr = Base64.encode(msg); //加密
	// console.log(encodeStr);

	// let decodeStr = Base64.decode(encodeStr);//解码
	// console.log(decodeStr);
	import validate from 'common/js/validate.js';
	import auth from 'common/js/auth.js';
	import globalConfig from '@/common/js/golbalConfig.js';
	import {
		randomString
	} from '../../utils/libs.js'
	import base64Arraybuffer from 'base64-arraybuffer'
	export default {
		components: {
			xunUpgrade,
			messageModal
		},
		data() {
			return {
				captchaShow: false,
				forceable: '0',
				nextVersion: '', //新app版本号
				androidUrl: '', //下载地址
				content: '', //更新内容
				pickerSelect: '86',
				columns: [
					['中国 +86', '美国', '日本']
				],
				countryShow: false, //国家前缀选择
				userShow: false, //用户协议确认弹窗
				checked: [], //用户协议
				baseImg: '',
				locationNum: '',
				isPlateno: false, //车牌号绑定
				randomString, //随机字符串方法
				// loginBg: this.$config.imgDomain + '/static/images/wx-login-bg.png',
				stepShow: 0,
				iimg: '',
				value: 0,

				index: 0,
				list: [],
				loginMode: 'account',
				formData: {
					mobile: '',
					account: '',
					password: '',
					invitation_code: '',
					dynacode: '',
					key: ''
				},
				captcha: {
					id: '',
					img: ''
				},
				isSub: false, // 提交防重复
				back: '', // 返回页
				redirect: 'redirectTo', // 跳转方式
				openidIsExits: false,
				isBind: false,
				dynacodeData: {
					seconds: 120,
					timer: null,
					codeText: '获取验证码',
					isSend: false
				},
				registerConfig: {
					register: '',
					login: ''
				},
				captchaConfig: 1,
				captchaIns: null,
			};
		},
		mixins: [auth, globalConfig],

		onLoad(option) {
			let that = this
			try {
				const value = uni.getStorageSync('token');
				if (value) {
					that.$navto('/pages/index/index')
				}
			} catch (e) {
				// error
			}
			this.getAppInfo()
			// this.getCaptcha()

			// if (uni.getStorageSync('authInfo')) {
			// 	this.authInfo = uni.getStorageSync('authInfo');
			// 	this.checkOpenidIsExits();
			// }
			// this.initNeCaptcha() //网易网盾
		},
		onShow() {

		},
		onReady() {
			// this.getStatic()
		},
		computed: {
			disable() {
				let rule = [{
						name: 'mobile',
						checkType: 'required',
						errorMsg: '请输入手机号'
					},
					{
						name: 'mobile',
						checkType: 'phoneno',
						errorMsg: '请输入正确的手机号'
					},
					{
						name: 'password',
						checkType: 'required',
						errorMsg: '请输入验证码'
					}
				];
				var checkRes = validate.check(this.formData, rule);
				if (checkRes) {
					return true;
				} else {
					return false;
				}

			},
		},
		methods: {
			tryToVerify() {
				this.captchaIns.showCaptcha((data) => {
					console.log(data);
					var method = data.method;
					if (method == "onSuccess") {
						// 验证成功
						this.sendMobileCode()
						var data = data.data;
						console.log(data.validate);
					} else if (method == "onError") {
						var data = data.data;
						console.log(data.message);
					}
				})
			},
			initNeCaptcha() {
				this.captchaIns = uni.requireNativePlugin('YD-Captcha')
				this.captchaIns.init({
					captcha_id: '易盾获取到的业务id',
					is_no_sense_mode: false
				})
			},
			async getAppInfo() {
				const res = await uni.$postRequest('/api/v1/version')
				if (res.code == 200) {
					let {
						code,
						desc,
						download,
						is_forced_update
					} = res.data
					
					this.androidUrl = download
					this.nextVersion = code
					// this.nextVersion = '2.0.1'
					this.content = desc
					this.forceable = is_forced_update
					this.$store.commit('NEXT_V',code)
				} else {
					uni.showToast({
						icon:'none',
						title: '获取更新失败'
					})
				}
			},
			goIndex() {
				this.$navto('/pages/index/index?PageCur=0')
			},
			close() {
				console.log('关闭事件');
				this.userShow = false
			},
			open() {
				console.log('打开事件');
			},
			agree() {
				this.checked = ['true']
				this.close()
				this.login()
			},
			goAgreement(e) {
				// 用户协议
				this.$navto('/pages/login/agreement?type=' + e)
			},
			countryPicker() {
				// 国家选择
				this.countryShow = true
			},
			pickerClose() {
				// 国家选择关闭
				this.countryShow = false
			},
			pickerConfirm(e) {
				// 国家选择关闭
				console.log(e.value[0], 'pickerConfirm');
				this.pickerSelect = this.getExtension(e.value[0])
				this.countryShow = false
			},
			getExtension(name) {
				return name.substring(name.lastIndexOf("+"))
			},
			// 方法
			async getStatic() {
				let {
					code,
					msg,
					data
				} = await this.$getRequest('/api/v1/cfg_static')
				if (code == 200) {
					console.log(data, '静态资源');
					this.baseImg = data.image_domain

					uni.setStorageSync('image_domain', data.image_domain)
					// 职务
					uni.setStorageSync('position', data.position)
				} else {
					this.$refs.uToast.show({
						message: msg
					})
				}

			},
			// 更新区域
			updatePlateno(e) {
				this.location = e
			},
			// 设置车牌号码
			setInputPlateno(e) {
				this.locationNum = e
			},
			handleTabs(e) {
				this.loginMode = e.index === 1 ? 'mobile' : 'account'
			},

			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
				if (this.index == 1) {
					console.log(123);
					this.$langConfig.change('en-us')
					this.$langConfig.refresh();
				} else {
					this.$langConfig.change('zh-cn')
					this.$langConfig.refresh();
				}
			},
			/**
			 * 获取验证码配置
			 */
			getCaptchaConfig() {
				this.$postRequest.request({
					url: '/api/config/getCaptchaConfig',
					success: res => {
						if (res.code >= 0) {
							this.captchaConfig = res.data.data.value.shop_reception_login;
							if (this.captchaConfig == 1) this.getCaptcha();
						}
					}
				});
			},
			/**
			 * 获取注册配置
			 */
			getRegisterConfig() {
				this.$postRequest.request({
					url: '/api/register/config',
					success: res => {
						if (res.code >= 0) {
							this.registerConfig = res.data.value;
							if (this.registerConfig.login.indexOf('mobile') != -1) this.loginMode = 'account';
							else
								this.loginMode = 'account';
							if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
						}
					}
				});
			},
			/**
			 * 切换登录方式
			 */
			switchLoginMode() {
				this.loginMode = this.loginMode == 'mobile' ? 'account' : 'mobile';
			},

			/**
			 * 获取验证图
			 */


			async getCaptcha() {
				this.captcha.id = this.randomString(8)
				// if (this.sing == 1) return
				let res = await this.$postRequest('/api/v1/captcha', {
					rand_id: this.captcha.id
				})
				// let img = 'data:image/png;base64,' + res
				let img = 'data:image/png;base64,' + base64Arraybuffer.encode(res)
				console.log(img,'img');
				this.captcha.img = img
				if (res.code === 200) {
					uni.showToast({
						title: res.msg,
						icon: 'success'
					})
				} else {
					// uni.showToast({
					// 	title: res.msg,
					// 	icon: 'error'
					// })
				}

			},
			/**
			 * 去注册
			 */
			toRegister() {
				if (this.back) this.$util.redirectTo('/pages/login/register/register', {
					back: this.back
				});
				else this.$util.redirectTo('/pages/login/register/register');
			},
			/**
			 * 忘记密码
			 */
			forgetPassword() {
				// if (this.back) this.$util.redirectTo('/otherpages/login/find/find', {
				// 	back: this.back
				// });
				// else 
				this.$navto('/pages/login/app-forget', false, 0)
			},

			/**
			 * 登录方法
			 */
			async login() {
				// this.$navto('/pages/index/index')
				if (!this.checked.length) {
					console.log('没有选择');
					this.userShow = true
					return
				}
				// this.$navto('/pages/index/index')
				console.log('已选');
				if (!this.verify(this.formData)) return
				let _this = this
				let url = '/api/v1/login'
				let {
					data,
					code,
					msg
				} = await _this.$postRequest(url +
					`?mobile=${_this.formData.mobile}&smscode=${_this.formData.password}&invitation_code=${_this.formData.invitation_code}`, {
						mobile: _this.formData.mobile,
						smscode: _this.formData.password,
						invitation_code: _this.formData.invitation_code
					})
				console.log(code);
				if (code === 200 && data) {
					uni.showToast({
						title: msg,
						icon: 'success'
					})
					uni.setStorage({
						key: 'token',
						data: data.token,
						success() {
							if (_this.$store.state.user.nextUrl) {
								console.log('vuex', _this.$store.state.user.nextUrl);
								_this.$navto(_this.$store.state.user.nextUrl, false, 1)
							} else {
								_this.$navto('/pages/index/index', false, 1)
							}
							_this.$store.commit("getUserLogin", true)
						}
					})
				} else {
					uni.showToast({
						title: msg,
						icon: 'error'
					})
				}

				// this.$navto('/pages/index/index', false, 1)
				// console.log(this.$request);



			},
			/**
			 * 登录验证
			 * @param {Object} data
			 */
			verify(data) {
				let rule = [];
				// 手机号验证
				if (this.loginMode == 'mobile') {
					rule = [{
							name: 'mobile',
							checkType: 'required',
							errorMsg: '请输入手机号'
						}, {
							name: 'mobile',
							checkType: 'phoneno',
							errorMsg: '请输入正确的手机号'
						},
						{
							name: 'password',
							checkType: 'required',
							errorMsg: '请输入验证码'
						},
						// {
						// 	name: 'invitation_code',
						// 	checkType: 'required',
						// 	errorMsg: '请输入图片验证码'
						// }
					];
					// if (this.captchaConfig == 1) {
					// 	if (this.captcha.id != '') rule.push({
					// 		name: 'captcha_code',
					// 		checkType: 'required',
					// 		errorMsg: this.$lang('captchaPlaceholder')
					// 	});
					// }
					// rule.push({
					// 	name: 'code',
					// 	checkType: 'required',
					// 	errorMsg: this.$lang('dynacodePlaceholder')
					// });
				}

				// 账号验证
				if (this.loginMode == 'account') {
					rule = [{
							name: 'mobile',
							checkType: 'required',
							errorMsg: '请输入手机号'
						},
						{
							name: 'mobile',
							checkType: 'phoneno',
							errorMsg: '请输入正确的手机号'
						},
						{
							name: 'password',
							checkType: 'required',
							errorMsg: '请输入验证码'
						}
					];
					// if (this.captchaConfig == 1) {
					// 	if (this.captcha.id != '') rule.push({
					// 		name: 'captcha_code',
					// 		checkType: 'required',
					// 		errorMsg: this.$lang('captchaPlaceholder')
					// 	});
					// }
				}

				var checkRes = validate.check(data, rule);
				if (checkRes) {
					return true;
				} else {
					this.$refs.uToast.show({
						message: validate.error
					})
					return false;
				}
			},
			/**
			 * 授权登录
			 */
			authLogin() {
				if (this.isSub) return;
				this.isSub = true;
				this.$postRequest.request({
					url: '/api/login/auth',
					data: this.authInfo,
					success: res => {
						if (res.code >= 0) {
							uni.setStorage({
								key: 'token',
								data: res.data.token,
								success: () => {
									uni.removeStorageSync('loginLock');
									uni.removeStorageSync('unbound');
									uni.removeStorageSync('authInfo');

									if (res.data.is_register && this.$refs.registerReward
										.getReward()) {
										this.$refs.registerReward.open();
									} else {
										if (this.back != '') {
											this.$util.redirectTo(decodeURIComponent(this
												.back), {}, this.redirect);
										} else {
											this.$util.redirectTo('/pages/member/index/index', {},
												this.redirect);
										}
									}
								}
							});
						} else {
							this.isSub = false;
							this.$util.showToast({
								title: res.message
							});
						}
					},
					fail: res => {
						this.isSub = false;
						uni.showToast({
							title: 'request:fail'
						});
					}
				});
			},
			mobileAuthLogin(e) {
				if (e.detail.errMsg == 'getPhoneNumber:ok') {
					var data = {
						iv: e.detail.iv,
						encryptedData: e.detail.encryptedData
					};
					if (Object.keys(this.authInfo).length) {
						Object.assign(data, this.authInfo);
					}
					if (this.authInfo.avatarUrl) data.headimg = this.authInfo.avatarUrl;
					if (this.authInfo.nickName) data.nickname = this.authInfo.nickName;
					if (uni.getStorageSync('source_member')) data.source_member = uni.getStorageSync('source_member');

					if (this.isSub) return;
					this.isSub = true;

					this.$postRequest.request({
						url: '/api/tripartite/mobileauth',
						data,
						success: res => {
							if (res.code >= 0) {
								uni.setStorage({
									key: 'token',
									data: res.data.token,
									success: () => {
										uni.removeStorageSync('loginLock');
										uni.removeStorageSync('unbound');
										uni.removeStorageSync('authInfo');
										if (res.data.is_register && this.$refs.registerReward
											.getReward()) {
											this.$refs.registerReward.open();
										} else {
											if (this.back != '') {
												this.$util.redirectTo(decodeURIComponent(this
													.back), {}, this.redirect);
											} else {
												this.$util.redirectTo(
													'/pages/member/index/index', {}, this
													.redirect);
											}
										}
									}
								});
							} else {
								this.isSub = false;
								uni.showToast({
									title: res.message
								});
							}
						},
						fail: res => {
							this.isSub = false;
							uni.showToast({
								title: 'request:fail',
								icon: 'error'
							});
						}
					});
				}
			},
			/**
			 * 发送手机验证码
			 */
			async sendMobileCode(e) {
				console.log('发送验证码');
				if (this.dynacodeData.seconds != 120) return;
				var data = {
					mobile: this.formData.mobile,
					// rand_id: this.captcha.id,
					// captcha: this.formData.invitation_code
				};
				var rule = [{
					name: 'mobile',
					checkType: 'required',
					errorMsg: '请输入手机号'
				}, {
					name: 'mobile',
					checkType: 'phoneno',
					errorMsg: '请输入正确的手机号'
				}];
				//图片验证码
				// if (this.captchaConfig == 1) {
				// 	rule.push({
				// 		name: 'captcha',
				// 		checkType: 'required',
				// 		errorMsg: '请输入校验码'
				// 	});
				// }
				var checkRes = validate.check(data, rule);
				if (!checkRes) {
					this.$refs.uToast.show({
						message: validate.error
					})
					return;
				}
				if(e&&e.captcha){
					var data = {
						mobile: this.formData.mobile,
						rand_id: e.id,
						captcha: e.captcha
					};
				}else{
					this.captchaShow = true
					return
				}
				
				if (this.dynacodeData.isSend) return;
				this.dynacodeData.isSend = true;
				let res = await this.$postRequest('/api/sms/send?mobile=' + data.mobile, data, {})
				if (res) {
					this.dynacodeData.isSend = false;
					if (res.code > 0) {
						this.captchaShow = false
						console.log('倒计时');
						// this.formData.key = res.data.key;
						if (this.dynacodeData.seconds == 120 && this.dynacodeData.timer == null) {
							this.dynacodeData.timer = setInterval(() => {
								this.dynacodeData.seconds--;
								this.dynacodeData.codeText = this.dynacodeData.seconds + 's后可重新获取';
								// console.log(this.dynacodeData.seconds);
								if (this.dynacodeData.seconds < 0) {
									clearInterval(this.dynacodeData.timer)
									this.dynacodeData.timer = null
									this.dynacodeData.seconds = 120
								}
							}, 1000);
						}
					} else {
						console.log('倒计时错');
						uni.showToast({
							title: res.msg
						});
					}
				} else {
					uni.showToast({
						title: 'request:fail'
					});
					this.dynacodeData.isSend = false;
				}
			},
			checkOpenidIsExits() {
				if (Object.keys(this.authInfo).length) {
					uni.setStorage({
						key: 'authInfo',
						data: this.authInfo
					});
					this.$postRequest.request({
						url: '/api/login/openidisexits',
						data: this.authInfo,
						success: res => {
							if (res.code >= 0 && res.data > 0) {
								this.isBind = true;
							}
						}
					});
				}
			}
		},
		watch: {
			'dynacodeData.seconds': {
				handler(newValue, oldValue) {
					if (newValue == 0) {
						clearInterval(this.dynacodeData.timer);
						this.dynacodeData = {
							seconds: 120,
							timer: null,
							codeText: '获取动态码',
							isSend: false
						};
					}
				},
				immediate: true,
				deep: true
			}
		}
	};
</script>

<style>
	@import '/common/css/common.css';
</style>

<style lang="scss" scoped>
	.bg {
		position: fixed;
		width: 100vw;
		height: 671rpx;
		bottom: constant(safe-area-inset-bottom);
		bottom: env(safe-area-inset-bottom);
	}

	.popup-box {
		border-radius: 20rpx 20rpx 0 0;
		background-color: #1A2131;

		.title {
			width: 100%;
			text-align: center;
			padding: 40rpx 0;
			font-size: 34rpx;
			color: #FFF;
			font-size: 1.0625rem;
			font-weight: 700;
		}

		.popup-content {
			padding: 0 80rpx;
			text-align: center;
			font-size: .875rem;
			color: #fff;
			line-height: 1.34375rem;


			.user-read {
				margin: 0 10rpx;
				color: #3ADD8F;
			}
		}

		.popup-btn {
			margin: 70rpx auto 0;
			width: 616rpx;
			height: 90rpx;
			background: #27FF92;
			color: #000;
			border-radius: 10rpx;
			font-size: .9375rem;
			font-weight: 700;

			&[disabled] {
				background-color: #f7f7f7 !important;
			}
		}

		.popup-btn-close {
			margin: 20rpx 0 70rpx;
			height: 62rpx;
			background: #27FF9200;
			border-radius: 10rpx;
			color: rgba(255, 255, 255, .6);
			font-size: .75rem;

		}
	}


	.welecome {
		margin-left: 65rpx;
		font-size: 56rpx;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 66rpx;
	}

	.welecome-c {
		margin: 80rpx 0 0 65rpx;
		font-size: 36rpx;
		font-weight: 600;
		color: #FFFFFF;

		.mobile {
			margin-right: 20rpx;
			width: 35rpx;
		}
	}

	.big-box {
		width: 100vw;
		min-height: 100vh;
		background: #17171F;

		.left-slot {
			width: 40rpx;
		}
	}


	.input-wrap {

		.content {
			background: #ECF8F8;
			padding: 20rpx 0rpx 20rpx 50rpx;
			margin-top: 80rpx;
			border-radius: 50rpx;

			.input-placeholder {
				font-weight: 400;
				font-size: 30rpx !important;
			}
		}
	}



	/deep/ .reward-popup .uni-popup__wrapper-box {
		background: none !important;
		max-width: unset !important;
		max-height: unset !important;
		overflow: unset !important;
	}

	/deep/ uni-toast .uni-simple-toast__text {
		background: red !important;
	}

	.withdraw-cate {
		width: 100%;
		height: 88rpx;
		display: flex;
		justify-content: center;
		background: #e9f8f8;
		position: fixed;
		top: 0;
		z-index: 999;
		box-sizing: border-box;

		.cate-li {
			background: #e9f8f8;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			height: 88rpx;
			width: 100%;
			font-size: 30rpx;
			line-height: 88rpx;

			.back {
				text-indent: 10rpx;
				font-size: 35rpx;
				font-weight: bold;
				line-height: 88rpx;
			}

			.img {

				left: 10rpx;
				width: 45rpx;
				height: 45rpx;
			}

			&.active:after {
				content: '';
				display: block;
				width: 100%;
				height: 4rpx;
				border-radius: 6rpx;
				position: absolute;
				left: 0;
				bottom: 0;
			}
		}
	}

	.back_pass {
		text-align: right;
		font-size: 15rpx;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.54);
		line-height: 17rpx;
	}

	.location {
		text-align: center;
		width: 80%;
		position: absolute;
		left: 50%;
		transform: translate(-50%);
		bottom: 20rpx;
	}


	/deep/ uni-checkbox .uni-checkbox-input {
		border-radius: 50%;
		width: 25rpx;
		height: 25rpx;
	}

	/deep/ uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
		color: #fff !important;
		background: #6BC5C4;
	}

	.text {
		font-size: 12px;
		color: #666;
		margin-top: 5px;
	}

	.uni-px-5 {
		padding-left: 10px;
		padding-right: 10px;
	}

	.uni-pb-5 {
		padding-bottom: 10px;
	}

	::v-deep .x-img {
		margin-right: 21rpx;
	}

	// 横线式输入框
	.find-form {
		width: calc(100% - 84rpx);
		margin: 81rpx auto 0;
		padding: 0rpx 24rpx;
		box-sizing: border-box;
		border-radius: 15rpx;
		position: relative;


		.form-input {
			display: flex;
			align-items: center;
			margin-top: 24rpx;
			padding: 0 16rpx 0 32rpx;
			background: #21202E;
			border-radius: 10rpx;
			height: 100rpx;
			color: #FFF;
			border: 1rpx solid rgba(0, 0, 0, 0.1);

			.location-num {
				font-size: 30rpx;
				margin-right: 10rpx;
			}

			.dynacode {
				// background: linear-gradient(180deg, #FF7D87 0%, #DF0011 100%);
				// border-radius: 60rpx 60rpx 60rpx 60rpx;
				font-weight: 400;
				padding: 16rpx 13rpx;
				color: #27ff92;
				font-size: .875rem;
			}

			.placeholder-img {
				margin-right: 21rpx;
				width: 24rpx;
			}
			.uni-input-dy{
				font-size: .875rem;
				flex: 1;
			}
			.uni-input {
				// width: 100%;
				font-size: .875rem;
				// background: #21202E;
			}

			input {
				padding: 0;

				// font-size: 16px;
				// font-size: 26px;

			}
		}

		.user-agreement {
			position: fixed;
			left: 50%;
			transform: translate(-50%, 0);
			bottom: 8vh;
			font-size: 26rpx;
			color: #93939C;
			flex-wrap: nowrap;


			.user-read {
				margin: 0 10rpx;
				color: #3ADD8F;
			}
		}

		.tips {
			margin-top: 20rpx;
			width: 100%;
			font-size: 24rpx;
			color: #93939C;
		}

		.find-btn {
			margin-top: 70rpx;
			width: 616rpx;
			height: 90rpx;
			border-radius: 10rpx;
			background: #20202c;
			color: #8f97b0;
			font-weight: 700;
			font-size: .9375rem;

			&[disabled] {
				background-color: #f7f7f7 !important;
			}
		}

		.find-btn-register {
			margin-top: 70rpx;
			width: 200rpx;
			height: 82rpx;
			background: linear-gradient(180deg, #FF7D87 0%, #DF0011 100%);
			border-radius: 60rpx 60rpx 60rpx 60rpx;
			color: #FFF;

			&[disabled] {
				background-color: #f7f7f7 !important;
			}
		}
	}

	// 车牌输入框
	.plateno-form {
		width: calc(100% - 84rpx);
		margin: 182rpx auto 0;
		padding: 106rpx 50rpx 70rpx;
		box-sizing: border-box;

		background: #FFF;
		box-shadow: 2px 3px 7px 1px rgba(0, 0, 0, 0.1);
		border-radius: 15rpx;
		position: relative;

		.plateno-btn {
			margin: 68rpx auto 0;
			// width: calc(100vw - 210rpx);
			border-radius: 15rpx;
			color: #fff;
			font-size: 23rpx;
			font-weight: 400;
			height: 64rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 15rpx;

			&[disabled] {
				background-color: #f7f7f7 !important;
			}
		}
	}

	.align-type {
		display: flex;
		// align-items: center;
		justify-content: space-between;
	}

	.placeholder-class {
		font-size: .875rem;
		font-weight: 400;
		color: rgba(255, 255, 255, .4);
	}

	.captcha {
		// width: ;
		height: 64rpx;
	}
</style>